<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link href="${base}/sweep/css/app.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${base}/sweep/gou/css/style.css">
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <style>
        .mui-row.mui-fullscreen>[class*="mui-col-"] {
            height: 100%;
        }

        .mui-col-xs-3,
        .mui-col-xs-9 {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-control-content {
            display: block;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }
        .mui-plus .plus{
            display: inline;
        }

        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }
        p {
            text-indent: 22px;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-popover {
            height: 300px;
        }
        .mui-content {
            padding: 10px;
        }
    </style>
</head>
<body>
 <input type="hidden" value="${tableNumberId}" id="tableNumberId"/>
 <input type="hidden" value="${userId}" id="userId"/>
<div id="slider" class="mui-slider" >
    <div class="mui-slider-group">
        <#list userImage as userImage>
            <div class="mui-slider-item">
                <a href="#">
                    <img src="${userImage.url}" style="height: 200px;">
                </a>
            </div>
        </#list>
    </div>
</div>
<br>


<div style="position: relative;height: 600px;" >
    <div class="mui-content mui-row mui-fullscreen">
        <div class="mui-col-xs-3">
            <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted  mui-segmented-control-vertical">
                <!--全部-->
<#--                <a class="mui-control-item " onclick="small(1)" data-index="0" href="#1">全部</a>-->
                <#list varietyClassification as varietyClassification>
                    <a class="mui-control-item " onclick="small('${varietyClassification.id}')" data-index="0" href="#${varietyClassification.id}">${varietyClassification.varietyName}</a>
                </#list>
            </div>
        </div>
        <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
            <#list commodity as commodity>
                <div id="#${commodity.classification}" class="mui-control-content">
                    <ul class="mui-table-view" >
                        <li class="mui-table-view-cell mui-media" >
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" src="${commodity.commodityUrl}" onclick="details('${commodity.id}')">
                                <div class="mui-media-body">
                                    <span>${commodity.commodityName}</span><br>
                                    <p>
                                        <span style="color: red;font-size: 12px;">￥${commodity.price}</span>&nbsp;&nbsp;
                                        <button type="button" style="float: right;width: 24%" value="${commodity.price},${commodity.id}" class="primary">添加</button>
                                    </p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </#list>


        </div>
    </div>
</div>
<div class=" footer" style="height: 55px" >
    <div class="mui-content-padded">
        <p style="text-indent: 0;" >
            <a href="#middlePopover"  class="mui-btn-outlined" style="padding: 5px 20px;"><span id="cartN">总计：￥<span id="totalpriceshow">0</span></span>元</a>
        <div class="right">
            <a id="btnselect" class="xhlbtn  disable" onclick="jie()" href="javascript:void(0)" style="position: relative;bottom: 40px;">去结算</a>
        </div>
        </p>

    </div>

</div>

<#--<div id="middlePopover" class="mui-popover" style="width: 100%">-->
<#--    <div class="mui-popover-arrow"></div>-->
<#--    <div class="mui-scroll-wrapper">-->
<#--        <div class="mui-scroll">-->
<#--            <ul class="mui-table-view" id="jie">-->

<#--            </ul>-->
<#--        </div>-->
<#--    </div>-->
<#--</div>-->
<#--<div class="footer">-->
<#--    <div class="left">-->
<#--        <span id="cartN">总计：￥<span id="totalpriceshow">0</span></span>元-->
<#--    </div>-->
<#--    <div class="right">-->
<#--        <a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)">去结算</a>-->
<#--    </div>-->
<#--</div>-->

</body>
<script src="${base}/sweep/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var gallery = mui('#slider');
    gallery.slider({
        interval: 1000//自动轮播周期,若为0则不自动播放,默认为0；
    });
    mui.init();
</script>
<script type="text/javascript" src="${base}/sweep/gou/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/add.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/vue.min.js"></script>

<script>

    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;
    })

    //查询对应商品
    function small(id) {
        $.ajax({
            type: "GET", //提交方式
            data: {"id": id,"userId":'${sessionUserId}'},
            url: "${base}/QRCode/selectClassificationId",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    $("#segmentedControlContents").html("")
                    for (var i = 0; i < data.data.length; i++) {
                        $("#segmentedControlContents").append(
                            '<div id="' + data.data[i].classification + '" class="mui-control-content">' +
                            '<ul class="mui-table-view" >' +
                            '<li class="mui-table-view-cell mui-media">' +
                            '<a href="javascript:;">' +
                            '<img class="mui-media-object mui-pull-left" onclick="details(\''+data.data[i].id+'\')" src="'+data.data[i].commodityUrl+'">' +
                            '<div class="mui-media-body">' +
                            '<span>'+data.data[i].commodityName+'</span><br>' +
                            '<p>' +
                            '<span style="color: red;font-size: 12px;">￥'+data.data[i].price+'</span>&nbsp;&nbsp;' +
                            '<button type="button" style="float: right;width: 24%" value="'+data.data[i].price+","+data.data[i].id+'" class="primary">添加</button>'+
                            '</p>' +
                            '</div>' +
                            '</a>' +
                            '</li>' +
                            '</ul>' +
                            '</div>'
                        )
                    }
                abc()
                }
            }
        });
    }
    <!--跳转详情-->
    function details(id) {
        window.location.href = "${base}/QRCode/details.html?id="+id;
    }
    function saveNum(moeny){
        var buttonValue = moeny;
        console.log("点击按钮的值:"+buttonValue)
        var spanValue = $("#totalpriceshow").text();
        console.log("获取span的值:"+spanValue)
        //计算合计
        var sum =  parseFloat(spanValue)+parseFloat(buttonValue);
        console.log("合计:"+sum)
        document.getElementById("totalpriceshow").innerText = sum;
    }
    var listValue ="";
    $(function(){
        abc();
    } )

    function abc(){
        //添加
        $(".primary").click(function() {
            var splitValue = this.value.split(",");
            var priceValue = "";
            var idValue = "";
            for (let i = 0; i < splitValue.length-1; i++) {
                priceValue=splitValue[0];
                idValue=splitValue[1];
            }
            //把添加的商品id放在list集合中
            listValue+=idValue+",";
            console.log("listValue:"+listValue)

            //点击按钮的值
            var buttonValue = priceValue;
            console.log("点击按钮的值:"+buttonValue)
            //获取span的值
            var spanValue = $("#totalpriceshow").text();
            console.log("获取span的值:"+spanValue)
            //计算合计
            var sum =  parseFloat(spanValue)+parseFloat(buttonValue);
            console.log("合计:"+sum)
            document.getElementById("totalpriceshow").innerText = sum;
        })
        //减少
        $(".jian").click(function() {
            //点击按钮的值
            var buttonValue = this.value;
            console.log("点击按钮的值:"+buttonValue)
            //获取span的值
            var spanValue = $("#totalpriceshow").text();
            console.log("获取span的值:"+spanValue)
            if(spanValue==0){
                layui.layer.msg("合计为0");
                return;
            }
            //计算合计
            var sum =  parseFloat(spanValue)-parseFloat(buttonValue);
            console.log("合计:"+sum)
            document.getElementById("totalpriceshow").innerText = sum;
        })
    }


    //js实现list去重
    // Array.prototype.unique3 = function(){
    //     var res = [];
    //     var json = {};
    //     for(var i = 0; i < this.length; i++){
    //         if(!json[this[i]]){
    //             res.push(this[i]);
    //             json[this[i]] = 1;
    //         }
    //     }
    //     return res;
    // }
    //结算
    function jie() {
        // if(listValue==""){
        //     mui.alert("请选择菜品!")
        //     return;
        // }
        <#--window.location.href = "${base}/QRCode/QRCodeDetails.html?list="+listValue+"&userId="+'${userId}';-->
        $.ajax({
            type: "POST", //提交方式
            data: {"listValue":listValue,"tableNumberId":$("#tableNumberId").val(),"userId":$("#userId").val()},
            url: "${base}/QRCode/saveOrder",//路径
            async:false,
            success: function (data) {//返回数据根据结果进行相应的处理
                if(data.code==200){
                    layer.msg("下单成功")
                    document.getElementById("totalpriceshow").innerText = 0
                    // var index = parent.layer.getFrameIndex(window.name);
                    // parent.layer.close(index);
                    // parent.sweepOrder();
                }else{
                    layer.msg("下单失败")
                }
            }
        });





    }


</script>

<script>
    //弹出框可滑动
    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function(e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function(e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });
</script>
</html>